<template>
  <div>
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="人员姓名">
        <el-input v-model="queryParams.persName" placeholder="人员姓名"></el-input>
      </el-form-item>
      <el-form-item label="公司">
        <el-select v-model="queryParams.coId" placeholder="所属公司">
          <el-option v-for="item in companyList" :key="item.coId" :label="item.coName" :value="item.coId"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-plus" size="mini" @click="query">查询
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-plus" size="mini" @click="reSet">清除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" @click="addHandler()" size="mini">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" @click="deleteHandler()" size="mini">删除</el-button>
      </el-col>
    </el-row>
    <br>
    <el-table :data="tableData" stripe v-loading="loading" style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column prop="persId" label="人员主键" width="180"></el-table-column>
      <el-table-column prop="coName" label="公司" width="180"></el-table-column>
      <el-table-column  prop="persName" label="人员姓名"></el-table-column>
      <el-table-column prop="persSex" label="人员性别">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.persSex==0" type="danger">女</el-tag>
          <el-tag v-else-if="scope.row.persSex==1"  >男</el-tag>
          <el-tag v-else type="success">不清楚</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="persInDate" :formatter="formatDate" label="入职时间"></el-table-column>
      <el-table-column prop="persSalary" label="薪水"></el-table-column>
      <el-table-column prop="persRemark" :formatter="formatStr" label="备注" width="200px"></el-table-column>
      <el-table-column class="caoZuo" label="操作" width="200px">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="editHandler(scope.row.persId)">修改</el-button>
          <el-button type="danger" size="mini" @click="deleteHandler(scope.row.persId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[5, 10, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="公司" prop="coId">
          <el-select v-model="form.coId" placeholder="所属公司">
            <el-option v-for="item in companyList" :key="item.coId" :label="item.coName" :value="item.coId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="人员姓名" prop="persName">
          <el-input placeholder="请输入人员姓名" v-model="form.persName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="人员性别" prop="persSex">
          <el-radio v-model="form.persSex" label="1">男</el-radio>
          <el-radio v-model="form.persSex" label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="入职时间" prop="persInDate">
          <el-date-picker v-model="form.persInDate" autocomplete="off"></el-date-picker>
        </el-form-item>
        <el-form-item label="薪水" prop="persSalary">
          <el-input  v-model="form.persSalary" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="persRemark" >
          <el-input type="textarea"
                    :rows="2"
                    placeholder="请输入内容" v-model="form.persRemark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">保存</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {getPage,editPage,editSave,addSave,deleteIds} from "@/api/webshop/Person"
import {listCompany} from "@/api/webshop/Company";
export default {
  title: '',
  //用于删除的id集合
  ids: [],
  data() {
    return {
      total:0,
      loading:false,
      coIdList:[],
      title: '',
      queryParams:{
        pageNum:1,
        pageSize:10,
        persName:'',
        coId:null,
        coIds:''
      },
      options: [],
      form: {
        persId: null,
        coId: null,
        persName: '',
        persSex: null,
        persInDate: null,
        persSalary: null,
        persRemark: "",
      },
      rules: {
        persName: [
          {required: true, message: '请输入仓库名称', trigger: 'blur'},
          {min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur'}
        ],
      },
      dialogVisible: false,
      formLabelWidth: '120px',
      tableData: [],
      companyList:{}
    }
  },
  created() {
    this.getList()
    this.getCompanyList()
  },
  methods: {
    handleSizeChange(val){
      // console.log(val)
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val){
      // console.log(val)
      this.queryParams.pageNum = val
      this.getList()
    },
    reSet(){
      this.queryParams={
        pageNum:1,
        pageSize:10,
        persName:'',
        coId:null
      }
    },
    query() {
      this.queryParams.coIds = this.coIdList.join(',')
      this.getList()
    },
    getList(){
      this.loading=true
      // 写请求
      getPage(this.queryParams).then(resp => {
        this.tableData=resp.rows
        this.loading=false
        this.total=resp.total
      })
    },/**
     * 清空表单
     */
    resetForm(){
      this.form = {
        repositoryId:null,
        repositoryName: null,
        repositoryCode: null,
        repositoryPhone: null,
        repositoryState: 1,
        repositoryAddress: null,
        repositoryStartDate: null,
      }
    },
    /**
     * 打开添加 对话框
     */
    addHandler() {
      this.resetForm()
      this.title = '添加信息'
      this.dialogVisible = true
    },
    /**
     * 打开修改 对话框
     */
    editHandler(id) {
      console.log(id)
      editPage(id).then(resp => {
        this.form = resp.data
        this.title = '修改信息'
        this.dialogVisible = true
      })
    },
    /**
     * 添加保存处理
     */
    onSubmit() {
      // 通过选择器找到form表单进行处理
      this.$refs['form'].validate((valid) => {
        if (valid) {
          //通过了校验
          if (this.form.persId) {
            // 修改
            // axios处理传值进行添加处理
            editSave(this.form).then(resp => {
              //判断成功还是失败,给予明确提示
              if (resp.code == 200) {
                //弹出成功消息
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                // 关闭显示窗
                this.dialogVisible = false
                // 刷新页面
                this.getList()
              } else {
                // 弹出失败消息
                this.$message.error('保存失败');
              }
            })
          }else{
            // 添加
            // axios处理传值进行添加处理
            addSave(this.form).then(resp => {
              //判断成功还是失败,给予明确提示
              if (resp.code == 200) {
                //弹出成功消息
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                // 关闭显示窗
                this.dialogVisible = false
                // 刷新页面
                this.getList()
              } else {
                // 弹出失败消息
                this.$message.error('保存失败');
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }


      });
    },
    /**
     * 删除处理
     * @param id
     */
    deleteHandler(id) {
      // console.log(id)
      //判断传入的是单条操作还是多选操作
      let idss = id || this.ids.join(',')
      // axios处理传值进行删除处理
      deleteIds(idss).then(resp => {
        //判断成功还是失败
        if (resp.code == 200) {
          //弹出成功消息
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          // 刷新页面
          this.getList()
        } else {
          // 弹出失败消息
          this.$message.error('删除失败');
        }
      }).catch(err => {
        // 发生异常时,弹出异常消息
        this.$message.error('删除异常');
      })
    },
    /**
     *     多选 选中处理
     */
    handleSelectionChange(val) {
      // console.log(val)
      this.ids = val.map(item => item.persId)
      console.log(this.ids)
    },
    getCompanyList(){
      // 写请求
      listCompany().then(resp => {
        this.companyList=resp.data
      })
    },
    formatStr(row, column,cellValve,index){
      // console.log(row, column,cellValve,index)
      return cellValve.length>10?cellValve.substr(0,10)+"...":cellValve
    },
    formatDate(row, column,cellValve,index){
      // console.log(row, column,cellValve,index)
      let date = new Date(cellValve);
      let o = {
        'y': date.getFullYear(),
        'm': (date.getMonth() + 1).toString().padStart(2, '0'),
        'd': date.getDate().toString().padStart(2, '0'),
        'h': date.getHours().toString().padStart(2, '0'),
        'i': date.getMinutes().toString().padStart(2, '0'),
        's': date.getSeconds().toString().padStart(2, '0')
      };
      return o.y+"-"+o.m+"-"+o.d
    },
    handleClick() {
      alert('button click');
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    logout() {
      this.$confirm('是否要退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push({path: "/"});
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
      });

    }

  }
}
</script>

<style scoped lang="scss">
.el-form {
  margin: 20px auto;
  width: 90%;
  text-align: left;
}
</style>
